<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>

    <!--公用css引用-->
    @include('front.common.style')

            <!--END/公用css引用-->
    <link rel="stylesheet" href="{{asset('/dist/css/index.css')}}">
    <link rel="stylesheet" href="../dist/css/userCenter.css">
</head>
<body>

<!--公共头部-->
@include('front.common.header')
        <!--END/公共头部-->

@inject('addressService','App\Interfaces\AddressService')
@inject('pictureService','App\Interfaces\PictureService')

    <?php

        //$user_id = 198859;
        $user = Auth::user();

        if($user){
            $user_id = $user->id;

            $addressService = $addressService->getAddressInfo($user_id);
        }else{

            throw new AddressException("用户user_id不能为空，请登录");
        }//end if()

    ?>

<!--购物车列表-->

<div class="inbox user-center">
    <div class="layout-margin unend">
        <div class="sidebar-end"></div>
        <div class="sidebar-start">
            @include('front.common.leftnav')
        </div>

        <!--主体部分-->
        <div class="container">
            <div class="container-inner u-order">
                <div class="ui-brd-box1-">
                    <div class="tit-2 tit-skin-2">
                        <span class="h">地址管理</span>
                    </div>
                </div>

                <div class="address-content">

                    {!! Form::model($addressInfo,array('route' => 'my.address.index','class'=>'js-form bl-form bl-formhor form-L', 'novalidate'=>'novalidate')) !!}

                        <!--信息展示-->
                        <div class="ajax-info">
                            <ul class="ajax-info-group ul-group address-list">
                                <!--TPL-->
                                <li class="item js-tpl fn-hide">

                                    <span class="fn-hide" data-name="is_default" data-value=""></span>
                                    <span class="fn-hide" data-name="position_ids" data-value=""></span>

                                    <div class="tit-5">
                                        <div class="h"><span data-name="consignee" class="name"></span><span class="bl-label fn-ml20">默认地址</span></div>
                                        <div class="more">
                                            <a class="js-setDef set-def fn-mr4" href="javascript:;">设为默认地址</a>
                                            <a class="js-edit fn-mr4" href="javascript:;">编辑</a>
                                            <a class="js-del" href="javascript:;">删除</a>
                                        </div>
                                    </div>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">收件人姓名：</span>
                                        <span class="txt" data-name="consignee"></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">地址：</span>
                                        <span class="txt" data-name="country">中国</span>
                                        <span class="txt" data-name="province"></span>
                                        <span class="txt" data-name="city"></span>
                                        <span class="txt" data-name="district"></span>
                                        <span class="txt" data-name="address"></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">手机：</span>
                                        <span class="txt" data-name="mobile" data-value=""></span>
                                    </p>
                                    <p>
                                        <span class="w-8em text-color-7 fn-tr">身份证号：</span>
                                        <span class="txt" data-name="id_card" data-value=""></span>
                                    </p>
                                </li>
                                <!--TPL-->

                                @if(!empty($addressInfo))

                                    @foreach($addressInfo as $key=>$item)

                                        <li class="bl-form-group item @if($item->is_default == 1) def-address @endif" data-id="{{$item->address_id}}">

                                            <span class="fn-hide" data-name="is_default">{{$item->is_default}}</span>
                                            <span class="fn-hide" data-name="position_ids">{{$item->position_ids}}</span>

                                            <div class="tit-5">
                                                <div class="h"><span data-name="consignee" class="consignee">{{$item->consignee}}</span>
                                                    <span class="bl-label fn-ml20">默认地址</span>
                                                </div>
                                                <div class="more">
                                                    <a class="js-setDef set-def fn-mr4" href="javascript:;">设为默认地址</a>
                                                    <a class="js-edit fn-mr4" href="javascript:;">编辑</a>
                                                    <a class="js-del" href="javascript:;">删除</a>
                                                </div>
                                            </div>

                                            <p>
                                                <span class="w-8em text-color-7 fn-tr">收件人姓名：</span>
                                                <span class="txt" data-name="consignee">{{$item->consignee}}</span>
                                            </p>
                                            <p>
                                                <span class="w-8em text-color-7 fn-tr">地址：</span>
                                                <span class="txt" data-name="country">{{$item->country}}</span>
                                                <span class="txt" data-name="province">{{$item->province}}</span>
                                                <span class="txt" data-name="city">{{$item->city}}</span>
                                                <span class="txt" data-name="district">{{$item->district}}</span>
                                                <span class="txt" data-name="address">{{$item->address}}</span>
                                            </p>
                                            <p>
                                                <span class="w-8em text-color-7 fn-tr">手机：</span>
                                                <span class="txt" data-name="mobile">{{$item->mobile}}</span>
                                            </p>
                                            <p>
                                                <span class="w-8em text-color-7 fn-tr">身份证号：</span>
                                                <span class="txt" data-name="id_card">{{$item->id_card}}</span>
                                            </p>
                                        </li>
                                    @endforeach

                                @endif

                            </ul>
                        </div>

                        <!--添加按钮-->
                        <div class="ajax-add-more add-btn-wrap">
                            <a href="javascript:;" class="js-addMore fn-btn fn-mr10">新增收货地址</a>
                            <span class="text-color-7">您已创建<span class="js-totalNum num">{{$addressInfo->count()}}</span>个收货地址，最多可创建<span class="total">20</span>个收货地址。</span>
                        </div>

                        <!--信息提交-->
                        <ul class="fn-hide ul-group ajax-form fn-mb20">

                            <li class="fn-hide">
                                <input name="country" type="text" value="中国">
                            </li>

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>所在地区：</label>
                                <div class="controls">
                                    <div class="select2-container fn-dib selectinput fn-mt6">
                                        <select id="area" class="elementJs"></select>
                                        <img src="../images/loading-1.gif" alt="" class="js-loading form-help fn-mt6">
                                    </div>
                                    {!! Form::text('position_ids',old('position_ids'),array( 'id'=>'position_ids','class'=>'js-areaInput fn-vhide fn-vl','required'=>'required','data-msg-required'=>'请选择'))!!}
                                    @if($errors->has('position_ids'))
                                        <label class="control-label" for="position_ids"><i class="fa fa-times-circle-o"></i> {{$errors->first('position_ids')}}</label>
                                    @endif

                                    <div class="fn-hide js-areaName" style="margin-left: -14px;">
                                        {!! Form::text('province',old('province'))!!}
                                        @if($errors->has('province'))
                                            <label class="control-label" for="province"><i class="fa fa-times-circle-o"></i> {{$errors->first('province')}}</label>
                                        @endif

                                        {!! Form::text('city',old('city'))!!}
                                        @if($errors->has('city'))
                                            <label class="control-label" for="city"><i class="fa fa-times-circle-o"></i> {{$errors->first('city')}}</label>
                                        @endif

                                        {!! Form::text('district',old('district'))!!}
                                        @if($errors->has('district'))
                                            <label class="control-label" for="district"><i class="fa fa-times-circle-o"></i> {{$errors->first('district')}}</label>
                                        @endif

                                    </div>

                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label class="col-sm-8 control-label"><em class="text-color-6">*</em>详细地址：</label>
                                <div class='col-sm-3 controls'>
                                    {!! Form::text('address',old('address'),array( 'id'=>'address','class'=>'form-control fn-tinput fn-tinput-longer elementJs','placeholder'=>'无需重复填写省市区，小于75个字','required'=>'required','data-msg-required'=>'请填写详细地址','maxlength'=>'75','data-msg-maxlength'=>'小于75个字'))!!}
                                    @if($errors->has('address'))
                                        <label class="control-label" for="address"><i class="fa fa-times-circle-o"></i> {{$errors->first('address')}}</label>
                                    @endif
                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>收货人名称：</label>
                                <div class="controls">
                                    {!! Form::text('consignee',old('consignee'),array( 'id'=>'consignee','class'=>'fn-tinput fn-tinput-longer elementJs','placeholder'=>'请使用真实姓名，长度不超过12个字','required'=>'required','data-msg-required'=>'请填写收货人','maxlength'=>'12','data-msg-maxlength'=>'小于75个字'))!!}
                                    @if($errors->has('consignee'))
                                        <label class="control-label" for="consignee"><i class="fa fa-times-circle-o"></i> {{$errors->first('consignee')}}</label>
                                    @endif
                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>身份证号码：</label>
                                <div class="controls">
                                    {!! Form::text('id_card',old('id_card'),array( 'id'=>'id_card','class'=>'form-control fn-tinput fn-tinput-longer elementJs','placeholder'=>'请填写收货人本人的真实身份证号码 ','required'=>'required','data-msg-required'=>'请填写身份证','data-rule-idCard'=>'true'))!!}

                                    <a href="javascript:;" class="tip-hover-show form-help fn-rel">
                                        <i class="icon icon-tip icon-tip-3"></i>
                                        <div class=" bl-tip-box tip-skin-gray">
                                            <div class="J-box LJ-box"><span class="J"></span><i class="J"></i></div>
                                            <div class="mark-L"></div>
                                            <div class="bl-tip-con">
                                                <div class="more-content">
                                                    <ul>
                                                        <li>① 根据海关要求，购买跨境商品需对收货人信息进行实名认证，用于个人物品入境申报。</li>
                                                        <li>② 因各海关政策不同，部分海关需您提供收货人身份信息进行认证。部分海关可通过支付平台实名信息进行入境申报，您可在支付平台进行认证（如已认证直接付款即可）。</li>
                                                        <li>③ 阿福易购会对您的身份证信息加密保管，绝不对外泄露！</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    @if($errors->has('id_card'))
                                        <label class="control-label" for="id_card"><i class="fa fa-times-circle-o"></i> {{$errors->first('id_card')}}</label>
                                    @endif
                                </div>
                            </li>

                            <li class="bl-form-group">
                                <label><em class="text-color-6">*</em>手机号码：</label>
                                <div class="controls">
                                    {!! Form::text('mobile',old('mobile'),array( 'id'=>'mobile','class'=>'fn-tinput fn-tinput-longer elementJs','placeholder'=>'请填写常用手机号','required'=>'required','data-msg-required'=>'请填写手机号','data-rule-mobile'=>'true'))!!}
                                    @if($errors->has('mobile'))
                                        <label class="control-label" for="mobile"><i class="fa fa-times-circle-o"></i> {{$errors->first('mobile')}}</label>
                                    @endif
                                </div>
                            </li>

                            <li class="bl-form-group bl-form-btns">
                                <label class="fn-vhide">提交：</label>
                                <div class="controls">
                                    <button class="fn-btn btn-primary fn-mr8 btn-save" type="submit">保存收货地址</button>
                                    <button class="fn-btn btn-nostyle btn-cancel" type="button">取消</button>
                                    <label><input type="checkbox" name="is_default">设为默认地址</label>
                                </div>
                            </li>
                        </ul>

                    {!! Form::close()  !!}
                </div>



            </div>

        </div>
        <!--END/主体部分-->

    </div>
</div>



<!--公共尾部-->
@include('front.common.footer')

        <!--END/公共尾部-->


<!--公用js引用-->
@include('front.common.script')

        <!--END/公用js引用-->

<script src="../dist/js/linkagesel/linkagesel-min.js"></script>
<script src="../dist/js/jquery.validation.js"></script>

<script src="../dist/js/ajaxForm.js"></script>
<script>
    //地区选择实例化
    var areaInput = $('.js-areaInput'),
        areaNameInputs=$('.js-areaName').find('input'),linkageSel;


    linkageSel=getAreaData(areaInput.val().split(','),function(linkAge){
        var d = linkAge.getSelectedDataArr('name'),    // 所有有选定菜单的name. this === linkageSel2
            idArr = linkAge.getSelectedArr(),
            arr = [];

        for (var i = 0, len = d.length; i < len; i++) {
            arr.push(d[i]);
        }
        if(d.length==3){
            areaInput.siblings('label.error').remove();
            areaInput.val(idArr);
            areaInput.data('text', d.join(' '));
        }else{
            areaInput.val('');
            areaInput.data('text', '');
        }

        for(var j=0;j<areaNameInputs.length;j++){
            areaNameInputs.eq(j).val(d[j]).trigger('input change');
        }

    },$('.js-loading'));

    //编辑时，赋值地区插件
    areaInput.on('input',function(){
        tools.log('input',areaInput.val());
        linkageSel.changeValues(areaInput.val().split(','),true);
    });

    //表单编辑操作
    var jqForm=$('.js-form');
    var totalNumItem=$('.js-totalNum');
    var ajaxForm= new AjaxForm(jqForm,{
        addUrl:'/my/address/create',     //GET
        delUrl:'/my/address',            //DELETE
        editUrl:'/my/address',           //PUT
        delType:'DELETE',
        editType:'PUT',
        addType:'GET',
        //hideOnEdit:false,
        editCb:function(formData,opts){
            var infoGroup=opts.curInfoGroup;
            if(opts.curEvent=='add'){
                if(totalNumItem.text()==0){
                    infoGroup.addClass('def-address').find('[data-name="is_default"]').data('value',1);
                }
                totalNumItem.text(totalNumItem.text()*1+1);
            }

            if(formData.is_default){
                infoGroup.addClass('def-address').siblings('.bl-form-group').removeClass('def-address').find('[data-name="is_default"]').data('value',0);
            }
        },
        delCb:function(){
            totalNumItem.text(totalNumItem.text()*1-1);
        }
    });

    //设置默认收货地址
    jqForm.on('click','.js-setDef',function(){
        var that=$(this),
                infoGroup=that.closest('.bl-form-group'),
                id=infoGroup.data('id');

        if(infoGroup.hasClass('def-address')) return false;

        var data=ajaxForm.getInfoData(infoGroup);
        data.is_default=1;
        console.log(data);
        $.ajax({
            url:'/my/address/'+id,//设置默认地址url
            type:'put',
            dataType:'json',
            data:data,
            success:function(res){
                if(res.status){
                    infoGroup.addClass('def-address').find('[data-name="is_default"]').data('value',1);
                    infoGroup.siblings('.def-address').removeClass('def-address').find('[data-name="is_default"]').data('value',0);
                }

            }
        });


    });


</script>
</body>
</html>